<template>
  <div class="personal">
    <van-nav-bar title="设置" left-text="返回" left-arrow @click-left="back" />
    <div class="personal-list">
      <div class="personal-data">
        <div class="data-userImg">
          <div class="left">
            <span>头像</span>
          </div>
          <div class="right">
            <van-uploader :max-size="500 * 1024" :after-read="onOversize" />
            <!-- <img class="autoImg" :src="userInfo.userImg" /> -->
          </div>
        </div>
        <van-divider
          :style="{
            color: '#f7f7f7',
            borderColor: '#666',
            padding: '0 16px',
            margin: '0',
          }"
        />
        <div class="data-userId">
          <div class="left">
            <span>用户ID</span>
          </div>
          <div class="right">
            <span>{{ userInfo.userId }}</span>
          </div>
        </div>
        <van-divider
          :style="{
            color: '#f7f7f7',
            borderColor: '#666',
            padding: '0 16px',
            margin: '0',
          }"
        />
        <div class="data-nikeName" @click="showUpdata">
          <div class="left">
            <span>昵称</span>
          </div>
          <div class="right">
            <span>{{ userInfo.nickName }}</span>
          </div>
        </div>
        <van-popup
          v-model="isUpdata"
          closeable
          position="bottom"
          :style="{ height: '40%' }"
          round
        >
          <div class="popup-title">
            <span>修改昵称</span>
          </div>
          <van-field
            v-model="setNikeName"
            type="text"
            label="昵称"
            placeholder="请输入昵称"
          />
          <div class="popup-nikename">
            <van-button
              block
              type="default"
              color="#21b276"
              round
              @click="setName"
              >修改</van-button
            >
          </div>
        </van-popup>
        <van-divider
          :style="{
            color: '#000',
            borderColor: '#999',
            padding: '0 16px',
            margin: '0',
          }"
        />
        <div class="data-brief" @click="isDesc">
          <div class="left">
            <span>简介</span>
          </div>
          <div class="right">
            <span>{{userInfo.desc ? userInfo.desc : '这家伙很懒，什么都没留下。'}}</span>
          </div>
        </div>
        <van-popup
          v-model="showDesc"
          closeable
          position="bottom"
          :style="{ height: '40%' }"
          round
        >
          <div class="popup-title">
            <span>修改简介</span>
          </div>
          <van-field
            v-model="setDesc"
            type="text"
            label="简介"
            placeholder="请输入简介"
          />
          <div class="popup-nikename">
            <van-button
              block
              type="default"
              color="#21b276"
              round
              @click="updateDesc"
              >修改</van-button
            >
          </div>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/less/personal.less";
export default {
  name: "Personal",
  data() {
    return {
      userInfo: {},
      isUpdata: false,
      showDesc: false,
      setNikeName: "",
      setDesc: "",
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    onOversize(file) {
      let types = ["png", "gif", "jpg", "jpeg"];

      let type = file.file.type.split("/")[1];

      if (types.indexOf(type) === -1) {
        return this.$toast({
          message: `文件类型只支持${type.join(",")}`,
          forbidClick: true,
          duration: 3000,
        });
      }

      let base64 = file.content.replace(/data:image\/[A-Za-z]+;base64,/, "");

      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "POST",
        url: this.baseUrl + "/updateAvatar",
        data: {
          appkey: this.appkey,
          tokenString,
          imgType: type,
          serverBase64Img: base64,
        },
      })
        .then((res) => {
          // console.log("res uploadAvatar ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === "H001") {
            if (res.data.result[0] === 1) {
              this.userInfo.userImg = res.data.userImg;
            }
          }
          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration: 3000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==>", err);
        });
    },
    getUserInfo() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "GET",
        url: this.baseUrl + "/findAccountInfo",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          // console.log("res getUserInfo ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }
          if (res.data.code === "B001") {
            this.userInfo = res.data.result[0];
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    showUpdata() {
      this.isUpdata = !this.isUpdata;
    },
    isDesc() {
      this.showDesc = !this.showDesc;
    },
    setName() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "POST",
        url: this.baseUrl + "/updateNickName",
        data: {
          appkey: this.appkey,
          nickName: this.setNikeName,
          tokenString,
        },
      })
        .then((res) => {
          // console.log("res getUserInfo ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }
          if (res.data.code === "C001") {
            this.isUpdata = false;
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    updateDesc() {
        let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "POST",
        url: this.baseUrl + "/updateDesc",
        params: {
          appkey: this.appkey,
          desc:this.setDesc,
          tokenString,
        },
      })
        .then((res) => {
          // console.log("res getUserInfo ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }
          if (res.data.code === "D001") {
            this.showDesc = false;
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
  },
};
</script>